<template>
  <div class="mca-count">
    <ul class="mca-count-list">
      <li>MCA集群机器数量<strong>{{ aggregations }}</strong></li>
      <li>1分钟负载数<strong>{{ loadCount }}</strong></li>
      <li>MCA集群长连接数量<strong>{{ hostLongCount }}</strong></li>
    </ul>
    <a-card
      class="defindcard"
      title="磁盘/AWAIT"
      :bordered="false"
      :headStyle="{ padding: '0 15px', border:0}"
      :style="{ marginBottom: '20px',marginTop: '20px' }"
      style="width:100%">
      <div class="disklan">
        <div class="disklan-left">
          <div class="diskicon"><img src="~@/assets/icons/await_picking.svg"/></div>
          <span>磁盘IO</span>
        </div>
        <div class="disklan-right">
          <div class="progress-label">磁盘IO写入速率 {{ avg_write_bps }} kb/s</div>
          <a-progress :percent="avg_write_bps" status="active" :show-info="false" />
          <div class="progress-label">磁盘IO读取速度 {{ avg_read_bps }} kb/s</div>
          <a-progress :percent="avg_read_bps" status="active" :show-info="false" />
        </div>
      </div>
      <div class="split-line"></div>
      <div class="disklan">
        <div class="disklan-left">
          <div class="diskicon"><img src="~@/assets/icons/await.svg"/></div>
          <span>AWAIT</span>
        </div>
        <div class="disklan-right">
          <div class="progress-label">await {{ await_average_time }}</div>
          <a-progress :percent="await_average_time" status="active" :show-info="false" />
          <div class="progress-label">昨日await平均值 {{ yesterday_average_value }}</div>
          <a-progress :percent="yesterday_average_value" status="active" :show-info="false" />
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
// import { getMcaCount } from '@/api/performance'
export default {
  name: 'McaCount',
  components: {
  },
  data () {
    return {
      aggregations: 0, // mca机器集群数量
      loadCount: 0, // 1分钟负载数据
      hostLongCount: 0, // 1分钟负载数据
      avg_write_bps: 0, // 写入IO磁盘
      avg_read_bps: 0, // 读取IO磁盘
      await_average_time: 0, // await时间平均值
      yesterday_average_value: 0 // 昨日await平均值
    }
  },
  created () {
  },
  mounted () {
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  methods: {
    /**
     * 获取MCA集群机器数量
     */
    getMcaCount () {
      // console.log('参数=====', JSON.stringify(params))
      // getMcaCount(params).then(res => {
      //   this.aggregations = res.aggregations.count.value
      // })
    }
  }
}
</script>
<style lang="less" scoped>
.defindcard{
  /deep/.ant-card-body{
    padding:0 24px 20px 24px;
  }
}
.disklan{
  overflow: hidden;
  .disklan-left{
    margin-top: 15px;
    float: left;
    width: 50%;
    span{
      font-weight: 400;
      font-size: 15px;
      color: #555;
    }
    .diskicon{
      display: inline-block;
      width: 80px;
      margin: 10px;
      img{
        width: 70%;
      }
    }
  }
  .disklan-right{
    float: left;
    width: 50%;
    .progress-label{
      font-size: 14px;
    }
  }
}
.split-line{
  margin: 15px 0;
  height: 2px;
  background: linear-gradient(to left,#51a9fc,#999,#7c83ca);
}
.mca-count{
  .mca-count-list{
    list-style: none;
    padding: 0;
    margin: 0;
    li{
      padding: 10px 10px;
      // border: 1px solid #e8e8e8;
      margin-bottom: 10px;
      position: relative;
      transition: all 0.3s;
      background: linear-gradient(-135deg, transparent 10px, #fff 0) top right;
      strong{
        font-size: 20px;
        margin-left: 10px;
        color: #00A8FE;
      }
    }
  }
}
</style>
